<template>
    <div class="option-view">
        <div class="button create" @click="showCreateRow = true">新增</div>
    </div>
    <div>
        <table class="router-table">
        <tr class="table-header">
            <th>id</th>
            <th>pagename</th>
            <th>path</th>
            <th>icon</th>
            <th>father</th>
            <th>index</th>
            <th>show</th>
            <th>操作</th>
        </tr>
        <tr class="table-tr" v-for="row in pageList">
            <td>{{ row.id }}</td>
            <td>{{ row.pagename }}</td>
            <td>{{ row.path }}</td>
            <td>{{ row.icon }}</td>
            <td>{{ getFather(row.fatherid) }}</td>
            <td>{{ row.index }}</td>
            <td>{{ row.show }}</td>
            <td>
                <div class="button delete" @click="deleteRow(row.id)">删除</div>
                <div class="button edit">编辑</div>
            </td>
        </tr>
        </table>
    </div>
    <div class="my-dialog-view" v-if="showCreateRow">
        <div class="dialog-body">
            <div class="dialog-title">新增路由</div>
            <div class="dialog-row  mt-12">
                <div class="dialog-label">站点名称</div>
                <div class="dialog-value">
                    <input type="text" v-model="createRow.pagename" />
                </div>
            </div>
            <div class="dialog-row">
                <div class="dialog-label">站点路径</div>
                <div class="dialog-value">
                    <input type="text" v-model="createRow.path" />
                </div>
            </div>
            <div class="dialog-row">
                <div class="dialog-label">站点图标</div>
                <div class="dialog-value">
                    <input type="text" v-model="createRow.icon" />
                </div>
            </div>
            <div class="dialog-row">
                <div class="dialog-label">父级站点</div>
                <div class="dialog-value">
                    <el-select v-model="createRow.fatherid"
                        placeholder="选择父级站点" style="width: 181px">
                        <el-option
                        v-for="item in getFatherList()"
                        :key="item.id"
                        :label="item.pagename"
                        :value="item.id"
                        />
                    </el-select>
                </div>
            </div>
            <div class="dialog-row">
                <div class="dialog-label">排序</div>
                <div class="dialog-value">
                    <input type="text" v-model="createRow.index" />
                </div>
            </div>
            <div class="dialog-row">
                <div class="dialog-label">默认展示</div>
                <div class="dialog-value">
                    <el-select v-model="createRow.show"  placeholder="Select" style="width: 181px">
                        <el-option
                        v-for="item in showList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
            <div class="dialog-row">
                <div class="dialog-label"></div>
                <div class="dialog-value mt-24">
                    <div class="button cancel" @click="showCreateRow = false">取消</div>
                    <div class="button create" @click="sureCreatePage">确认</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getPages, createPage, deletePage } from '../../api/page'
import { ElNotification,ElMessage, ElMessageBox } from 'element-plus'
let pageList = ref([])
let showCreateRow = ref(false)
let createRow = ref({
    pagename: '',
    path: '',
    icon: '',
    fatherid: 0,
    index: 0,
    show: 1
})
const showList = [
    {
        value: 0,
        label: '不展示'
    },{
        value: 1,
        label: '展示'
    }
]
const initPageList = ()=>{
  getPages().then(res=>{
    pageList.value = res.data.list
    console.table(pageList.value)
  })
}
const getFather = (id) => {
    if(id == 0){
        return '----'
    }else {
        return pageList.value.find(item => item.id == id).pagename
    }
}
// 获取所有的一级站点
const getFatherList = () => {
    let list = pageList.value.filter(item => item.fatherid == 0)
    return [{id: 0, pagename: '没有父级'},...list]
}
const sureCreatePage = ()=>{
    createPage(createRow.value).then(res=>{
        showCreateRow.value = false
        ElNotification({
            title: '通知',
            message: h('i', { style: 'color: teal' }, res.msg),
            border: true,
        })
        initPageList()
    })
}
// 删除一条数据
const deleteRow = (id)=>{
    ElMessageBox.confirm(
    '确认删除这个页面吗?',
    '提醒',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      deletePage(id).then(res=>{
        if(res.code == 200){
            ElNotification({
                title: '通知',
                message: h('i', { style: 'color: teal' }, res.msg),
                border: true,
            })
            initPageList()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const init = ()=> {
    initPageList()
}

init()
</script>

<style scoped>
.option-view {
    width: calc(100% - 24px);
    min-height: 42px;
    margin: 12px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.36);
    border-radius: 4px;
    padding: 8px;
    line-height: 32px;
    text-align: left;
}
.router-table {
    width: calc(100% - 24px);
    margin: 12px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.36);
    border-radius: 4px;
    padding: 8px;
    line-height: 32px;
    text-align: left;
}
.router-table td {
    padding: 0 8px;
    border: 1px solid #e0e0e0;
}
.router-table th {
    padding: 0 8px;
}
.table-header th {
    border: 1px solid #e0e0e0;
}
.button {
    width: 48px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    margin-left: 8px;
    float: left;
    border-radius: 4px;
}
.delete {
    color: rgb(161, 0, 0);
    background: rgb(161, 0, 0, 0.12);
}
.edit {
    color: rgb(0, 153, 0);
    background: rgb(0, 153, 0, 0.12);
}
.create {
    color: rgb(0, 0, 153);
    background: rgb(0, 0, 153, 0.12);
}
.cancel {
    color: rgb(56, 56, 56);
    background: rgb(56, 56, 56, 0.12);
}

.button:hover {
    opacity: 0.8;
    font-weight: bold;
    transform: scale(1.05);
}

</style>